<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    主题样式-->
    <link rel="stylesheet" type="text/css" href="../jeasyui/themes/bootstrap/easyui.css">
    <!-- 配置圖片样式-->
    <link rel="stylesheet" type="text/css" href="../jeasyui/themes/icon.css">
    <!--    引入jquery环境-->
    <script type="text/javascript" src="../jeasyui/jquery.min.js"></script>
    <!--    引入easyui.min.js环境-->
    <script type="text/javascript" src="../jeasyui/jquery.easyui.min.js"></script>
    <!--    引入汉化包-->
    <script type="text/javascript" src="../jeasyui/easyui-lang-zh_CN.js"></script>
    <script>
        $(function () {
            $("#btn-edit").click(function () {
                let array=$("#dg").datagrid('getSelections');
                if(array.length==0){
                    $.messager.alert('消息','请选择要修改的记录数','error')
                }else if(array.length>1){
                    $.messager.alert('消息','只能选择一条记录进行修改','error')
                }else{
                    $("#edit-form").form('load',{
                        bid:array[0].bid,
                        bnum:array[0].bnum,
                        bname: array[0].bname,
                        price: array[0].price,
                        author: array[0].author,
                        ddesc: array[0].ddesc,
                        quantity: array[0].quantity,
                        cateid: array[0].category.cateid,
                    })
                    $("#edit-dialog").dialog({
                        closed:false,
                        buttons: [{
                            text:'保存',
                            iconCls:'icon-save',
                            handler:function () {
                                $("#edit-form").form('submit', {
                                    url: '../book/updateBook',
                                    onSubmit: function () {
                                        return $("#edit-form").form('validate');
                                    },
                                    success: function (flag) {
                                        if (flag) {
                                            $("#edit-dialog").dialog({closed: true});//关闭对话框
                                            $("#dg").datagrid('load');//刷新表格
                                            $.messager.show({
                                                title: '消息',
                                                msg: '修改成功',
                                                timeout: 5000,
                                                showType: 'slide'
                                            });
                                        }
                                    }
                                })

                            }
                        }]
                    })
                }
            })

            $("#btn-remove").click(function () {
                let array = $("#dg").datagrid('getSelections');
                if (array.length == 0) {
                    $.messager.alert('消息', '请选择要删除的数据', 'error')
                } else {
                    let bids = [];
                    for (let i in array) {
                        bids.push(array[i].bid);
                    }
                    $.post('../book/removeBook', {"bids[]": bids}, function (flag) {
                        if (flag) {
                            $("#dg").datagrid('load');
                            $.messager.show({
                                title: '消息',
                                msg: '删除成功',
                                timeout: 5000,
                                showType: 'slide'
                            });
                        }
                    })
                }
            })
            $("#btn-add").click(function () {
                $("#add-dialog").dialog({
                    closed: false,
                    buttons: [{
                        text: '保存',
                        iconCls: 'icon-save',
                        handler: function () {
                            $("#add-form").form('submit', {
                                url: '../book/saveBook',
                                onSubmit: function () {
                                    return $("#add-form").form('validate');
                                },
                                success: function (flag) {
                                    if (flag) {
                                        $("#add-dialog").dialog({closed: true});//关闭对话框
                                        $("#dg").datagrid('load');//刷新表格
                                        $.messager.show({
                                            title: '消息',
                                            msg: '添加成功',
                                            timeout: 5000,
                                            showType: 'slide'
                                        });
                                    }
                                }
                            })


                        }
                    }, {
                        text: '重置',
                        iconCls: 'icon-redo',
                        handler: function () {

                        }
                    }]
                })


            })

            $("#btn-search").click(function () {
                $("#dg").datagrid('load', {
                    bname: $("#bname").val()
                })
            })
            $("#dg").datagrid({
                url: '../book/listPageBooks',
                fit: true,
                fitColumns: true,
                pagination: true,
                pagePosition: 'both',
                toolbar: '#tb',
                columns: [[
                    {field: 'bid', title: '类别ID', width: 100, checkbox: true},
                    {field: 'bnum', title: '图书编号', width: 100},
                    {field: 'bname', title: '图书名称', width: 100},
                    {field: 'price', title: '单价', width: 100},
                    {field: 'author', title: '作者', width: 100},
                    {field: 'quantity', title: '库存数量', width: 100},
                    {field: 'ddesc', title: '图书简介', width: 100},
                    {
                        field: 'category', title: '所属类别', width: 100,
                        formatter: function (val, rows, index) {
                            return val.catename;

                        }
                    }
                ]]
            })
        })
    </script>

</head>
<body>
<div id="tb">
    <table>
        <tr>
            <td><input id="bname" placeholder="请输入图书名称进行条件查询">
                <a id="btn-search" href="#" class="easyui-linkbutton" plain="true"
                   iconCls="icon-search">查询</a>
            </td>
        </tr>
    </table>
    <a id="btn-add" href="#" class="easyui-linkbutton" plain="true"
       iconCls="icon-add">添加</a>
    <a id="btn-edit" href="#" class="easyui-linkbutton" plain="true"
       iconCls="icon-edit">修改</a>
    <a id="btn-remove" href="#" class="easyui-linkbutton" plain="true"
       iconCls="icon-remove">删除</a>
</div>
<div id="dg"></div>

<!--定义添加对话框-->
<div id="add-dialog" class="easyui-dialog" modal="true" closed="true" title="添加图书"
     style="width: auto;height: auto">
    <form id="add-form" method="post">
        <table>
            <tr>
                <td>
                    <input name="bnum" placeholder="请输入图书编号" class="easyui-validatebox"
                           data-options="required:true">

                </td>
                <td>
                    <input name="bname" placeholder="请输入图书名称" class="easyui-validatebox"
                           data-options="required:true">

                </td>
            </tr>
            <tr>
                <td>
                    <input name="price" placeholder="请输入单价" class="easyui-validatebox"
                           data-options="required:true">

                </td>
                <td>
                    <input name="author" placeholder="请输入作者" class="easyui-validatebox"
                           data-options="required:true">

                </td>
            </tr>
            <tr>
                <td>
                    <input class="easyui-combobox" name="cateid" placeholder="请选择图书类别"
                           data-options="valueField:'cateid',required:true,editable:false,
                           textField:'catename',url:'../category/listCategory'">

                </td>
                <td>
                    <input name="quantity" placeholder="请输入馆藏数量" class="easyui-validatebox"
                           data-options="required:true">
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <textarea name="ddesc" cols="50" placeholder="请输入图书简介"></textarea>

                </td>
            </tr>

        </table>
    </form>
</div>


<!--定义修改对话框-->
<div id="edit-dialog" class="easyui-dialog" modal="true" closed="true" title="修改图书"
     style="width: auto;height: auto">
    <form id="edit-form" method="post">
        <table>
            <tr>
                <td>
                    <input name="bid" type="hidden">
                    <input name="bnum" readonly placeholder="请输入图书编号" class="easyui-validatebox"
                           data-options="required:true">

                </td>
                <td>
                    <input name="bname" placeholder="请输入图书名称" class="easyui-validatebox"
                           data-options="required:true">

                </td>
            </tr>
            <tr>
                <td>
                    <input name="price" placeholder="请输入单价" class="easyui-validatebox"
                           data-options="required:true">

                </td>
                <td>
                    <input name="author" placeholder="请输入作者" class="easyui-validatebox"
                           data-options="required:true">

                </td>
            </tr>
            <tr>
                <td>
                    <input class="easyui-combobox" name="cateid" placeholder="请选择图书类别"
                           data-options="valueField:'cateid',required:true,editable:false,
                           textField:'catename',url:'../category/listCategory'">

                </td>
                <td>
                    <input name="quantity" placeholder="请输入馆藏数量" class="easyui-validatebox"
                           data-options="required:true">
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <textarea name="ddesc" cols="50" placeholder="请输入图书简介"></textarea>

                </td>
            </tr>

        </table>
    </form>
</div>

</body>
</html>